<template>
	<view class="page-body">
		<view class="body-one">
			<view class="body-one-line">
				<view class="one-img">
					<image
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180520%2F0473e00bdfd2476fbe0c228a45a1652c.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635404064&t=e5efe281b2bd7f0fd64031277b75f636"
						mode="widthFix"></image>
				</view>
				<view class="body-one-right">
					<view>
						<text class="body-one-right-text1">我是小海豚NO1</text>
						<u-icon name="photo"></u-icon>
					</view>
					<view>
						<text class="body-one-right-text2">点这里可以添加个性签名</text>
						<u-icon name="photo"></u-icon>
					</view>
					<view>
						<view>
							<text>关注 12</text>
							<text>|</text>
							<text>粉丝 0</text>
						</view>

					</view>
				</view>
			</view>
			<view class="body-one-line2">
				<view class="body-one-line2-row">
					<text class="body-one-line2-text1">淘友圈</text>
					<text class="body-one-line2-text2">某某分享了宝贝</text>
				</view>

			</view>
			<view class="body-one-line3">
				<column-item icon="level" text="收藏"></column-item>
				<column-item icon="level" text="收藏"></column-item>
				<column-item icon="level" text="收藏"></column-item>
				<column-item icon="level" text="收藏"></column-item>
			</view>
		</view>
		<view class="body-two">
			<view class="body-two-line">
				<text class="body-two-line-text">我的订单</text>
				<view>
					<text>全部</text>
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			<view class="body-two-line2">
				<column-item icon="level" text="会员中心" v-for="item in 5" :key="item"></column-item>
			</view>

		</view>
		<view class="body-three">
			<view class="body-three-line-column" v-for="item in line3List" :key="item.id">
				<u-icon :name="item.icon" size="28"></u-icon>
				<text class="body-three-line-text">{{item.text}}</text>
				<text class="body-three-line-text">收藏2</text>
			</view>
		</view>
		<view class="body-four">
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
			<view class="body-four-line-column">
				<u-icon name="level" size="28"></u-icon>
				<text class="body-four-line-text">收藏</text>
			</view>
		</view>
		<view class="body-five"></view>
		<view class="body-six"></view>
		
		<u-tabbar v-model="current" :list="list"></u-tabbar>
	</view>
</template>

<script>
	import ColumnItem from './columnItem.vue'
	export default {
		components:{
			ColumnItem
		},
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 6,
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '发布',
						// midButton: true,
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
				line3List: [
					{
						id: 0,
						icon: 'red-packet',
						text: '红包'
					},
					{
						id: 1,
						icon: 'red-packet',
						text: '红包'
					},
					{
						id: 2,
						icon: 'red-packet',
						text: '红包'
					},
					{
						id: 3,
						icon: 'red-packet',
						text: '红包'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.page-body {
		height: 100vh;

		background-color: #FEF0F0;

		.body-one {
			background-color: #FEF0F0;
			padding: 10rpx 10rpx;

			.body-one-line {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.one-img {
					height: 100rpx;
					width: 100rpx;

					image {
						height: 100rpx;
						width: 100rpx;
						border-radius: 180rpx;
					}

				}

				.body-one-right {
					flex: 1;
					margin-left: 20rpx;

					.body-one-right-text1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.body-one-right-text2 {
						font-size: 16rpx;
					}
				}
			}

			.body-one-line2 {
				height: 80rpx;
				margin: 50rpx 50rpx;
				background-color: #C8C9CC;
				border-radius: 40rpx;

				.body-one-line2-row {
					display: flex;
					//align-items: center;
					justify-content: space-between;
					padding-top: 15rpx;
					font-size: 30rpx;

					.body-one-line2-text1 {
						margin-left: 25rpx;

					}

					.body-one-line2-text2 {
						margin-right: 25rpx;
					}
				}
			}

			.body-one-line3 {
				flex: 25%;
				display: flex;
				justify-content: space-between;
				padding: 0 50rpx;

				.body-one-line3-column {
					display: flex;
					flex-flow: column;
					align-items: center;
				}

				.body-one-line3-text1 {}
			}



		}

		.body-two {
			margin: 20rpx 10rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.body-two-line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 30rpx;

				.body-two-line-text {
					font-weight: bold;
				}
			}

			.body-two-line2 {
				flex: 20%;
				display: flex;
				justify-content: space-between;
				padding: 0 50rpx 30rpx;

				.body-two-line2-column {
					display: flex;
					flex-flow: column;
					align-items: center;
				}

			}
		}

		.body-three {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 10rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.body-three-line-column {
				flex: 25%;
				display: flex;
				flex-flow: column;
				align-items: center;
				padding: 20rpx 0;
			}
		}

		.body-four {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 10rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			flex-wrap: wrap;

			.body-four-line-column {
				flex: 25%;
				display: flex;
				flex-flow: column;
				align-items: center;
				padding: 20rpx 0;

			}
		}

	}
</style>
